<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>灵动岛</title>
  <style>
    body {
      display: flex;
      justify-content: center;
    }

    #phone {
      width: 300px;
      height: 600px;
      text-align: center;
      background-size: contain;
      background-repeat: no-repeat;
      background-image: url(https://www.apple.com.cn/v/iphone-14-pro/a/images/overview/dynamic-island/dynamic_hw__btl4fomgspyu_large.png);
    }

    .island {
      width: 84px;
      text-align: center;
      display: inline-block;
      height: 24px;
      border-radius: 12px;
      background-color: black;
      margin-top: 22px;
      position: relative;
    }

    .island::after {
      height: 24px;
      content: ' ';
      width: 24px;
      right: 0;
      position: absolute;
      border-radius: 50%;
      background-color: black;
    }

    /*变长*/
    .longer {
      animation: longer 800ms ease-in-out forwards;
    }

    @keyframes longer {
      0% {}

      60% {
        width: 208px;
      }

      80% {
        transform: scaleX(1.06);
      }

      100% {
        transform: scaleX(1);
        width: 208px;
      }
    }

    /* 分离 */
    .separate {
      animation: separate-left 800ms ease-in-out forwards;
    }

    .separate::after {
      animation: separate-right 800ms ease-in-out forwards;
    }

    @keyframes separate-left {
      0% {
        width: 208px;
      }

      40% {
        transform: scaleX(1.06);
        width: 84px;
      }

      100% {
        transform: scaleX(1);
        width: 84px;
      }
    }

    @keyframes separate-right {
      0% {
        right: 0;
      }

      40% {
        transform: scaleX(1.06);
      }

      100% {
        transform: scaleX(1);
        right: -30px;
      }
    }

    /* 合并 */
    .merge {
      animation: merge-left 800ms ease-in-out forwards;
    }

    .merge::after {
      animation: merge-right 800ms ease-in-out forwards;
    }

    @keyframes merge-left {
      0% {}

      20% {
        transform: scaleX(1.06);
      }

      40% {
        transform: scaleX(1.2);
      }

      100% {
        transform: scaleX(1);
      }
    }

    @keyframes merge-right {
      0% {
        right: -30px;
      }

      40% {
        transform: scaleX(1.06);
      }

      80% {
        height: 23px;
      }

      100% {
        transform: scaleX(1);
        right: 24px;
      }
    }


    /* larger-s */
    .larger-s {
      animation: larger-s 800ms ease-in-out forwards;
    }

    @keyframes larger-s {
      0% {}

      60% {
        width: 248px;
        height: 44px;
        border-radius: 20px;
      }

      80% {
        transform: scaleX(1.04);
      }

      100% {
        transform: scaleX(1);
        width: 248px;
        height: 44px;
        border-radius: 20px;
      }
    }

    /* larger-l */
    .larger-l {
      animation: larger-l 800ms ease-in-out forwards;
    }

    @keyframes larger-l {
      0% {}

      60% {
        width: 248px;
        height: 160px;
        border-radius: 30px;
      }

      80% {
        transform: scaleX(1.04);
      }

      100% {
        transform: scaleX(1);
        width: 248px;
        height: 160px;
        border-radius: 30px;
      }
    }

    .face {
      animation: face 800ms ease-in-out forwards;
    }

    @keyframes face {
      0% {
        width: 248px;
        height: 160px;
        border-radius: 30px;
      }

      40% {
        transform: scaleX(1.04);
      }

      60% {
        width: 84px;
        height: 84px;
      }

      80% {
        transform: scaleX(1.04);
      }

      100% {
        transform: scaleX(1);
        width: 84px;
        height: 84px;
      }
    }

    .origin {
      animation: origin 800ms ease-in-out forwards;
    }

    @keyframes origin {
      0% {
        width: 84px;
        height: 84px;
      }

      40% {
        transform: scaleX(1.04);
      }

      100% {
        width: 84px;
        height: 24px;
        transform: scaleX(1);
      }
    }
  </style>
</head>

<body>
  <div id="phone">
    <div class="island"></div>
  </div>
  <script>
    const isLand = document.querySelector('.island')

    const animations = ['longer', 'separate', 'merge', 'larger-s', 'larger-l', 'face', 'origin']

    isLand.addEventListener("click", () => {
      isLand.classList.add(animations[index])
    })
    let index = 0

    isLand.addEventListener("animationend", (e) => {
      if (
        e.animationName === "separate-right" ||
        e.animationName === "merge-right"
      ) {
        return;
      }
      index++;
      setTimeout(() => {
        if (index <= animations.length - 1) {
          isLand.classList.add(animations[index]);
        } else {
          index = 0;
        }
      }, 800);
    });
  </script>
</body>

</html>